<template>
  <div style="padding: 20px">
    <el-container>
      <el-aside :width="aside">
        <el-menu default-active="editMember" @select="handleSelect" :class="fixed ? 'menu' :''">
          <el-menu-item index="editMember">
            <template slot="title">
              <span style="margin-right: 20px">
                <svg class="ali-icon" aria-hidden="true">
                  <use xlink:href="#icon-chengyuan"></use>
                </svg>
              </span>
              成员编辑
            </template>
          </el-menu-item>
          <el-menu-item index="editPaper">
            <template slot="title">
              <span style="margin-right: 20px">
                <svg class="ali-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji"></use>
                </svg>
              </span>
              论文编辑
            </template>
          </el-menu-item>
          <el-menu-item index="editAlbum">
            <template slot="title">
              <span style="margin-right: 20px">
                <svg class="ali-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangce2"></use>
                </svg>
              </span>
              照片集编辑
            </template>
          </el-menu-item>
          <el-menu-item index="editHome" :disabled="true">
            <template slot="title">
              <span style="margin-right: 20px">
                <svg class="ali-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye-xuanzhong"></use>
                </svg>
              </span>
              首页编辑
            </template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <div v-if="activeMenu === 'editPaper'">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="管理论文" name="viewPaper">
              <ManagePaper></ManagePaper>
            </el-tab-pane>
            <el-tab-pane label="添加论文" name="addPaper">
              <AddPaper></AddPaper>
            </el-tab-pane>
            <el-tab-pane label="更新论文" name="updatePaper">
              <AddPaper v-bind:isAdd="update"></AddPaper>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div v-if="activeMenu === 'editMember'">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="管理成员" name="viewMember">
              <ManageMember></ManageMember>
            </el-tab-pane>
            <el-tab-pane label="添加成员" name="addMember">
              <AddMember></AddMember>
            </el-tab-pane>
            <el-tab-pane label="更新成员" name="updateMember">
              <AddMember v-bind:isAdd="update"></AddMember>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div v-if="activeMenu === 'editAlbum'">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="管理相册" name="viewAlbum">
              <ManageAlbum></ManageAlbum>
            </el-tab-pane>
            <el-tab-pane label="添加相册" name="addAlbum">
              <AddAlbum></AddAlbum>
            </el-tab-pane>
            <el-tab-pane label="更新相册" name="updateAlbum">
              <AddAlbum v-bind:isAdd="update"></AddAlbum>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import ManagePaper from './editpaper/ManagePaper'
import AddPaper from './editpaper/AddPaper'
import ManageMember from './editmember/ManageMember.vue'
import AddMember from './editmember/AddMember.vue'
import ManageAlbum from './editalbum/ManageAlbum.vue'
import AddAlbum from './editalbum/AddAlbum.vue'

export default {
  props: {
    fixed: {
      type: Boolean,
      default: false
    }
  },
  components: {
    ManagePaper,
    AddPaper,
    ManageMember,
    AddMember,
    ManageAlbum,
    AddAlbum
  },
  computed: {
    activeTab: {
      set: function (value) {
        this.$store.commit('setActiveTab', value)
      },
      get: function () {
        return this.$store.state.activeTab
      }
    }
  },
  created () {
    this.$store.commit('setActiveTab', 'viewMember')
  },
  mounted () {
    window.addEventListener('resize', this.onResize)
    this.onResize()
  },
  methods: {
    handleSelect (index) {
      this.activeMenu = index
      if (index === 'editPaper') this.$store.commit('setActiveTab', 'viewPaper')
      if (index === 'editMember') this.$store.commit('setActiveTab', 'viewMember')
      if (index === 'editAlbum') this.$store.commit('setActiveTab', 'viewAlbum')
    },
    onResize () {
      const width = document.body.getBoundingClientRect().width
      if (width > 1500) this.aside = '200px'
      else this.aside = '160px'
    }
  },
  data () {
    return {
      activeMenu: 'editMember',
      aside: '200px',
      update: false
    }
  }
}
</script>

<style scoped>
.ali-icon {
  width: 1.5em;
  height: 1.5em;
  vertical-align: -0.25em;
  fill: currentColor;
  overflow: hidden;
}
.menu{
  position: fixed;
  top: 81px;
  width: inherit;
}
</style>
